<template>
  <view   class="index"  >
	  <view   v-if="currentTabbar == 0"  class="first"  >
	  	<first /> 
	  </view>
	  
	  <view  v-if="currentTabbar == 1" class="first"   >
	  	<second  /> 
	  </view> 
  </view>	
  
  <TnTabbar v-model="currentTabbar"    fixed>
  	    <TnTabbarItem   class="footer" 
  	      v-for="(item, index) in tabbarData"
  	      :key="index"
  	      :icon="item.icon"
  	      :active-icon="item.activeIcon"
  	      :text="item.name"/>
  </TnTabbar>
  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
import TnTabbar from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue'
import first from './first.vue'
import second from './second.vue'

const currentTabbar = ref(0)
let   navHeight = ref(0)

// 导航栏数据
const tabbarData = [
  {
    name: '首页',
    icon: 'home',
    activeIcon: 'home-fill',
  },
  {
    name: '我的',
    icon: 'my-circle',
    activeIcon: 'my-circle-fill',
  },
]


</script>


<style>
/* 设置全局背景色 */
page {
  background-color: #EAEEF7;
}


.index {
  background-color: #EAEEF7; /* 浅灰色 */
  height: 90vh;
  transform-origin: center top; /* 设置变形的原点 */
  transition: transform 0.3s; /* 平滑过渡效果 */
}

.first{
	border: 0px solid red;
	height: 100%; /* 使用100%的高度来覆盖整个屏幕 */
	/* 使用100%的高度来覆盖整个屏幕
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;  */
}

</style>
